@charset "utf-8";

// === 定义公共类样式 begin ===

// 对字体图标做一下处理  使其宽度高度与代码表现一致
.icon,
.iconfont{
    font-size: inherit;

    &::before{
		display: inline-block;
	}
}

.show{
	display: block;
}

.hide{
	display: none!important;
}

.hover{
	opacity: .8;
}

// 当一个img独占一个容器的时候
.img-box{
	img{
		display: block;
		width:100%;
	}
}

// 左浮动
.pull-left{
	float: left;
}

// 又浮动
.pull-right{
	float: right;
}

// 清除浮动 
.clear{
    &::after{
      content: '';
      display: block;
      clear: both;
    }
}

// 禁止点击事件
.no-onclick{
	@extend %no-onclick;
}

// 将一个区域定义为flex容器（横向布局）
.flex-wrap{
	@include flex-box();
}

// 将一个区域定义为flex容器（纵向布局）
.flex-vertical{
	@include flex-box($direction: column);
	height: 100%;
}

// 将一个区域定义为flex子元素 占比例为1
.flex-item{
	@include flex-item();
}

// 将一个区域定义为flex子元素（纵向布局）
.flex-item-vertical{
	@include flex-item($width:auto);
	@extend %scroll;
}

// 文字溢出隐藏 一行
.text-overflow-1{
	@include text-overflow();
}

// 遮罩层
.model-fixd{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 2;
}

// 页面头部
.page-header{
	position: relative;

	height: pxToRem(96);
	line-height: pxToRem(96);

	text-align: center;
	font-size: pxToRem(36);
	color: #fff;

	.left,
	.right{
		position: absolute;
		height: pxToRem(96);
		line-height: pxToRem(96);
	}

	.center{
		margin: 0 pxToRem(96);
		height: pxToRem(96);
	}

	.left,
	.right{
		font-size: pxToRem(30);
		width: pxToRem(96);
		bottom: 0;
	}

	.right{
		right: 0;
	}
}

.bgcolor-quartz{
	background-color: $color-quartz;
}

// 没有数据时 
#no-data{
    height: 100%;
    font-size: 0;
    @include set-bg-img($color: #f7f4f8, $name: 'no-data.png', $size: pxToRem( 320 ) auto);
}

// 没有数据时 
#no-data2{
    height: 100%;
    font-size: 0;
    @include set-bg-img($color: #f7f4f8, $name: 'no-data2.png', $size: pxToRem( 320 ) auto);
}

.header{
    background-color: $blue-font-color;
    .top{
        position: relative;
        font-size: pxToRem( 34 );
        padding: 0 pxToRem( 120 );
        min-height: pxToRem( 96 );
        &.many-nav{
            padding-right: 0;
        }
        .iconfont{
            min-width: pxToRem( 68 );
            height: pxToRem( 96 );
            line-height: pxToRem( 96 );
            position: absolute;
            bottom: 0;
            font-size: pxToRem( 32 );
            &.icon-return{
                left: 0;
                min-width: pxToRem( 54 );
                width: pxToRem(54);
                @include set-bg-img( $name: "fanhui.png", $size: pxToRem(22) auto, $position: center center);
            }
            &.icon-return-close{
                left: 0;
                min-width: pxToRem( 54 );
                width: pxToRem(54);
                @include set-bg-img( $name: "19.png", $size: pxToRem(22) auto, $position: center center);
            }
            &.right{
                right: 0;
                text-align: right;
                &.img-search{
                    @include set-bg-img( $name: "icon-search.png", $size: pxToRem(36) auto, $position: center center);
                }
                &.icon-share{
                    @include set-bg-img( $name: "share.png", $size: pxToRem(36) auto, $position: center center);
                }
                &.icon-close{
                    @include set-bg-img( $name: "19.png", $size: pxToRem(32) auto, $position: center center);
                }
                /*&:not(:empty){
                    &::before{
                        padding-right: pxToRem( 14 );
                    }
                }*/
            }
            &.right-size{
                right: pxToRem(16);
                text-align: right;
                font-size: $font-vice-title-size;
                .badge{
                    display: inline-block;
                    position: relative;
                    top: pxToRem(-21);
                    right: pxToRem(6);
                    font-size: pxToRem(14);
                    color: #fff;
                    width: pxToRem(24);
                    height: pxToRem(24);
                    text-align: center;
                    line-height: pxToRem(24);
                    background-color: #f23b3b;
                    border-radius: 50%;
                }
            }
            &.photo{
                left: pxToRem( 20 );
                span{
                    @extend %butt;
                    @include set-bg-img('user/touxiang_03.png');
                    width: pxToRem( 60 );
                    border-radius: 50%;
                    height: pxToRem( 60 );
                    vertical-align: middle;
                }
            }
        }
        color: #fff;
        .title{
            text-align: center;
            line-height: pxToRem( 96 );
            &.search{
                @include flex-box();
                padding-top: pxToRem(19);
                line-height: pxToRem(58);
                .search-img{
                    @include flex-item();
                    display: inline-block;
                    background-color: rgba(0,0,0,0.2);
                    height: pxToRem(58);
                    border-radius: pxToRem(29);
                    font-size: $font-vice-title-size;
                    color: #bad0eb;
                     .sear{
                        padding-left: pxToRem( 48 );
                        @include set-bg-img( $name: "icon-searchs.png", $size: pxToRem(28) auto, $position: left center);
                    } 
                }
            }
            /*&.active{
                color: #d9372e;
                font-size: pxToRem( 28 );
            }*/
        }
    }

    .nav{
        @include flex-box();
        background-color: #fff;
        padding: pxToRem(21) 0;
        font-size: $font-g-vice-title-size;
        text-align: center;
        color: $black-dark-font-color;
        .item{
            @include flex-item();
            @include border-right-m;
            &:before{
                border-color: #e8e8e8;
            };
            &:last-child{
                &::before{
                    border: none;
                };
            };
            &.active{
                color: $blue-font-color;
                .iconfont{
                    color: $blue-font-color;
                }
                span{
                    padding-right: pxToRem( 30 );
                    @include set-bg-img( $name: "ianse.png", $size: pxToRem(20) auto, $position: right center);
                }
            }
            span{
                font-size: $font-g-vice-title-size; 
                padding-right: pxToRem( 30 );
                @include set-bg-img( $name: "1111.png", $size: pxToRem(20) auto, $position: right center);
            }
            /*.iconfont{
                font-size: pxToRem(20);
                color: #969696;
                padding-left: pxToRem(15);
            }*/
        }
    }

    .nav-submit{
        @include flex-box();
        background-color: #fff;
        .slide{
            @include flex-item();
            white-space: nowrap;
            @extend %scroll;
            line-height: pxToRem(72);
            text-align: center;
            span{
                position: relative;
                display: inline-block;
                font-size: $font-g-vice-title-size;
                color: $black-dark-font-color;
                padding: 0 pxToRem(15);
                /*&::after{
                    content: '';
                    display: inline-block;
                    height: pxToRem(2);
                    width: pxToRem(40);
                    border-bottom: pxToRem(2) solid rgba(0,0,0,0);
                    position: absolute;
                    bottom: pxToRem(7);
                    left: 25%;
                };*/
                &.active{
                    color: $blue-font-color;
                        &::after{
                        content: '';
                        display: inline-block;
                        height: pxToRem(2);
                        width: pxToRem(40);
                        border-bottom: pxToRem(2) solid $blue-font-color;
                        position: absolute;
                        bottom: pxToRem(7);
                        left: 50%;
                        transform: translateX(-50%);
                    };
                }
            }
        }
        .more{
            display: inline-block;
            width: pxToRem(70);
            height: pxToRem(72);
            @include set-bg-img( $name: "1111.png", $size: pxToRem(20) auto, $position: center center);
            box-shadow: -2px 0px 2px #e8e8e8;
        }
    }
}

#toast{
    z-index: 2;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(56,56,56,0.8);
    border-radius: pxToRem(90);
    height: pxToRem(90);
    line-height: pxToRem(90);
    font-size: pxToRem(32);
    color: #fff;
    text-align: center;
    white-space: nowrap; 
    padding: 0 pxToRem(40);
}

// === 定义公共类样式 end ===